<template>
  <!-- 添加页面start -->
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :visible.sync="dialogVisible"
    class="dialogStyleMiddle"
    :before-close="cancel"
  >
    <el-form
      v-if="dialogVisible"
      ref="addSysUserForm"
      :model="sysUser"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="归属部门" prop="deptId">
            <treeselect
              v-model="sysUser.deptId"
              :options="deptOptions"
              size="medium"
              disabled
              no-options-text="暂无数据"
              clear-value-text=""
              :disable-branch-nodes="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="岗位分类" prop="postIds">
            <el-select
              v-model="sysUser.postIds"
              multiple
              disabled
              placeholder=""
              size="medium"
            >
              <el-option
                v-for="item in postOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="userName">
            <label slot="label" v-html="`姓&emsp;&emsp;名`" />
            <el-input v-model="sysUser.userName" readonly size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="登录账号" prop="loginName">
            <el-input v-model="sysUser.loginName" readonly :disabled="sysUser.userId === ''?false:true" size="medium" />
          </el-form-item>
        </el-col>
        <el-col v-if="sysUser.userId==''" :span="12">
          <el-form-item label="人员密码" prop="password">
            <el-input v-model="sysUser.password" readonly type="password" size="medium" />
          </el-form-item>
        </el-col>
        <el-col v-if="sysUser.userId==''" :span="12">
          <el-form-item label="确认密码" prop="Confirmpassword">
            <el-input v-model="sysUser.Confirmpassword" readonly type="password" size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="phonenumber">
            <el-input v-model="sysUser.phonenumber" readonly size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="人员性别" prop="sex">
            <el-radio-group v-model="sysUser.sex" disabled size="medium">
              <!-- <el-radio label="0">男</el-radio>
                <el-radio label="1">女</el-radio>
                <el-radio label="2">未知</el-radio> -->
              <el-radio v-for="dict in sexOptions" :key="dict.dictValue" :label="dict.dictValue">
                {{ dict.dictLabel }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="sysUser.email" readonly size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色" prop="roleIds">
            <label slot="label" v-html="`角&emsp;&emsp;色`" />
            <el-select
              v-model="sysUser.roleIds"
              multiple
              disabled
              placeholder=""
              size="medium"
            >
              <el-option
                v-for="item in roleOptions"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="权限范围" prop="dataScope">
            <el-select v-model="sysUser.dataScope" disabled placeholder="">
              <el-option
                v-for="dict in dataScopeOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
            <span style="color:red">该人员拥有菜单的默认数据权限</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注信息" prop="remark">
            <el-input v-model="sysUser.remark" readonly type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    <span slot="footer" class="dialog-footer">-->
    <!--      <el-button size="medium" @click="cancel">取 消</el-button>-->
    <!--    </span>-->
  </el-dialog>
</template>

<script>
// 树型选择引入
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
// 引入封装好的接口
import {
  getUserByUserId
} from '@/api/system/user'
// 引入角色 中查询list方法
import { listRoleAll } from '@/api/system/role'
import { listPostAll } from '@/api/system/post'
import { getDeptTree } from '@/api/system/dept'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      sexOptions: [],
      dataScopeOptions: [],
      deptOptions: [],
      postOptions: [],
      roleOptions: [],
      sysUser: {
        userId: '',
        loginName: '',
        deptId: '',
        phonenumber: '',
        email: '',
        userName: '',
        password: '',
        Confirmpassword: '',
        sex: '0',
        status: '0',
        roleIds: [],
        postIds: [],
        remark: '',
        dataScope: ''
      }
    }
  },
  created() {
    // 人员性别
    this.getDicts('sys_user_sex').then(response => {
      this.sexOptions = response.data.rows
    })
    // 角色数据权限
    this.getDicts('role_data_scope').then(response => {
      this.dataScopeOptions = response.data.rows
    })
  },
  methods: {
    // 部门选择树列表
    selectDeptTree() {
      getDeptTree({ dataObjType: 'SysUser' }).then(resp => {
        if (resp) {
          this.deptOptions = resp.data
        }
      })
    },
    // 查找岗位表的所有信息
    selectPostOptions() {
      listPostAll().then(resp => {
        if (resp) {
          this.postOptions = resp.data.rows
        } else {
          this.msgError(resp.message)
        }
      })
    },
    // 查找角色表的所有信息
    selectRoleOptions() {
      listRoleAll().then(resp => {
        if (resp) {
          this.roleOptions = resp.data.rows
        } else {
          this.msgError(resp.message)
        }
      })
    },
    handleDetail(id) {
      this.selectRoleOptions()
      this.selectDeptTree()
      this.selectRoleOptions()
      this.getUserData(id)
      this.dialogTitle = '人员信息详情'
      this.dialogVisible = true
    },
    getUserData(id) {
      // 根据id查找这条的内容
      getUserByUserId(id).then(res => {
        if (res) {
          const { user, roles, posts } = res.data
          // 选择的角色
          const someRoles = user.roles
          // 全部角色
          // eslint-disable-next-line no-array-constructor
          const roleArray = new Array()
          for (let k = 0; k < someRoles.length; k++) {
            roleArray.push(someRoles[k].roleId)
          }
          this.sysUser.roleIds = roleArray
          this.roleOptions = roles
          // eslint-disable-next-line no-array-constructor
          const postArray = new Array()
          for (let j = 0; j < posts.length; j++) {
            if (posts[j].flag) {
              postArray.push(posts[j].postId)
            }
          }
          this.postOptions = posts
          const { userId, deptId, loginName, phonenumber, email, userName,
            password, sex, enterpriseId, dataScope, remark, fileId } = user
          this.sysUser = { ...this.sysUser, userId, deptId, loginName, phonenumber, email, userName,
            password, sex, enterpriseId, dataScope, remark, fileId, reserved1: fileId }
        } else {
          this.msgError(res.message)
        }
      })
    },
    emptyData() {
      this.sexOptions = []
      this.dataScopeOptions = []
      this.deptOptions = []
      this.postOptions = []
      this.roleOptions = []
      this.sysUser = {
        userId: '',
        loginName: '',
        deptId: '',
        phonenumber: '',
        email: '',
        userName: '',
        password: '',
        Confirmpassword: '',
        sex: '0',
        status: '0',
        roleIds: [],
        postIds: [],
        remark: '',
        dataScope: ''
      }
    },
    cancel() {
      this.dialogVisible = false
    }
  }
}
</script>

<style>

</style>
